<template>
  <div class="app-container">

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form :model="queryParams" ref="queryForm1" size="small" :inline="true" @submit.native.prevent>
          <div>
            <el-form-item label="首次提现需要完成线下理财数量" label-width="230px" prop="firstChargeWithdrawal" :rules="[{required: true,message: '首充提现需要完成线下理财数量不能为空',trigger: 'blur'}]">
              <div style="display: flex">
                <el-input type="number" min="0" v-model="queryParams.firstChargeWithdrawal" @input="changeInput1" placeholder="请输入首充提现需要完成线下理财数量" />
                <el-button type="text" @click="submitForm1({awardType:1,awardUnit:queryParams.firstChargeWithdrawal})" v-show="input1">修 改</el-button>
              </div>
            </el-form-item>
          </div>

          <el-form-item label="新用户注册奖励" label-width="230px" prop="newUserRegistration" :rules="[{required: true,message: '新用户注册奖励不能为空',trigger: 'blur'}]">
            <div style="display: flex">
              <el-input type="number" min="0" v-model="queryParams.newUserRegistration" @input="changeInput2" placeholder="请输入新用户注册奖励" />
              <el-button type="text" @click="submitForm2({awardType:2,awardUnit:queryParams.newUserRegistration})" v-show="input2">修 改</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form :model="queryParams" ref="queryForm2" size="small" :inline="true" @submit.native.prevent>
          <div>
            <el-form-item label="新用户充值返现" label-width="230px" prop="newUserRechargeRewards" :rules="[{required: true,message: '新用户充值返现不能为空',trigger: 'blur'}]">
              <div style="display: flex">
                <el-input type="number" min="0" v-model="queryParams.newUserRechargeRewards" @input="changeInput3" placeholder="请输入新用户充值返现" />%
                <el-button type="text" @click="submitForm3({awardType:4,awardUnit:queryParams.newUserRechargeRewards})" v-show="input3">修 改</el-button>
              </div>
            </el-form-item>
          </div>
          <el-form-item label="同IP限制" label-width="230px" prop="newRegisterIP" :rules="[{required: true,message: '同IP限制不能为空',trigger: 'blur'}]">
            <div style="display: flex">
              <el-input type="number" min="0" v-model="queryParams.newRegisterIP" @input="changeInput4" placeholder="请输入同IP限制" />
              <el-button type="text" @click="submitForm4({awardType:6,awardUnit:queryParams.newRegisterIP})" v-show="input4">修 改</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form :model="queryParams" ref="queryForm3" size="small" :inline="true" @submit.native.prevent>
          <el-form-item label="升级奖励" label-width="230px" prop="upgradeRewards" :rules="[{required: true,message: '升级奖励不能为空',trigger: 'blur'}]">
            <div style="display: flex">
              <el-input type="number" min="0" v-model="queryParams.upgradeRewards" @input="changeInput5" placeholder="请输入升级奖励" />
              <el-button type="text" @click="submitForm5({awardType:8,awardUnit:queryParams.upgradeRewards})" v-show="input5">修 改</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form :model="queryParams" ref="queryForm3" size="small" :inline="true" @submit.native.prevent>
          <el-form-item label="有效用户余额" label-width="230px" prop="effectiveUser" :rules="[{required: true,message: '有效用户余额不能为空',trigger: 'blur'}]">
            <div style="display: flex">
              <el-input type="number" min="0" v-model="queryParams.effectiveUser" @input="changeInput6" placeholder="请输入有效用户余额" />
              <el-button type="text" @click="submitForm6({awardType:10,awardUnit:queryParams.effectiveUser})" v-show="input6">修 改</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-divider></el-divider>
    <el-row :gutter="24">
      <el-col :span="12">
        <div style="display: flex;align-items: center">
          <h4>充值返现</h4>
          <el-button type="primary" style="height: 35px;margin-left: 30px;" @click="open4 = true;titleSection='新增区间'">新增区间</el-button>
        </div>
        <el-table v-loading="loading" :data="queryParams.rechargeRewards" style="margin-bottom: 48px" border
                  :height="700">
          <el-table-column label="充值区间" align="center" prop="minPoint" min-width="180"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.awardCondition.minPoint">${{ scope.row.awardCondition.minPoint }} ~ ${{ scope.row.awardCondition.maxPoint }}</span>
              <span v-else>≥${{ scope.row.awardCondition.minPoint }}</span>
            </template>
          </el-table-column>
          <el-table-column label="奖励类型" align="center" prop="awardCondition" width="250" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span style="color: #1c84c6">百分比</span>
              <el-switch
                v-model="scope.row.awardAmount"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchChange3(scope.row)"
                active-value="1"
                inactive-value="0"
                style="margin: 0 20px;">
              </el-switch>
              <span>固定金额</span>
            </template>
          </el-table-column>
          <el-table-column label="返现金额" align="center" prop="amount" min-width="140"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>${{scope.row.awardUnit.toFixed(2)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit"
                         @click="open4=true;sectionObj=JSON.parse(JSON.stringify(scope.row));titleSection='修改区间'">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.conId,'是否确认删除该区间')">删除</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <h4>个人提现手续费设置</h4>
        <el-table v-loading="loading" :data="queryParams.withdrawalFee">
          <el-table-column label="配置类型" align="center" prop="name" width="180" :show-overflow-tooltip="true"/>
          <el-table-column label="奖励类型" align="center" prop="awardCondition" width="250" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span style="color: #1c84c6">百分比</span>
              <el-switch
                v-model="scope.row.awardAmount"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchChange1(scope.row)"
                active-value="1"
                inactive-value="0"
                style="margin: 0 20px;">
              </el-switch>
              <span>固定金额</span>
            </template>
          </el-table-column>
          <el-table-column label="金额/百分比" align="center" prop="awardUnit" width="180" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span style="color: #1c84c6;margin-right: 20px;">{{scope.row.awardUnit}}</span>
              <el-button type="text" @click="withdrawalsObj=JSON.parse(JSON.stringify(scope.row));open = true">修改</el-button>
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center" prop="mobile" width="180" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{ scope.row.awardCondition == 0 ? '%' : '$' }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>


    <el-row :gutter="24">
      <el-col :span="12">
        <div style="display: flex;align-items: center">
          <h4>IP白名单</h4>
          <el-button type="primary" style="height: 35px;margin-left: 30px;" @click="open1 = true">新 增</el-button>
        </div>
        <el-table v-loading="loading" :data="queryParams.whiteListIp" style="margin-top: 20px;">
          <el-table-column label="IP地址" align="center" prop="awardCondition" width="180" :show-overflow-tooltip="true"/>
          <el-table-column label="是否禁止" align="center" prop="awardAmount" width="180" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.awardAmount"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchChange2(scope.row)"
                active-value="1"
                inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.conId,'是否确认删除该白名单')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="12">
        <div style="display: flex;align-items: center">
          <h4>送出奖励</h4>
          <el-button type="primary" style="height: 35px;margin-left: 30px;" @click="open3 = true">新 增</el-button>
        </div>
        <el-table v-loading="loading" :data="queryParams.sendOutRewards" style="margin-top: 20px;">
          <el-table-column label="累计奖励" align="center" prop="awardCondition" width="180" :show-overflow-tooltip="true"/>
          <el-table-column label="返利" align="center" prop="awardUnit" width="180" :show-overflow-tooltip="true">
            <template slot-scope="scope">
             {{scope.row.awardUnit+'%'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" type="text" icon="el-icon-edit" @click="formsendOut = JSON.parse(JSON.stringify(scope.row));open3=true;">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.conId,'是否确认删除该奖励')">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
<!--      <el-col :span="12">
        <div style="display: flex;align-items: center">
          <h4>升级奖励</h4>
          <el-button type="primary" style="height: 35px;margin-left: 30px;" @click="open2 = true">新 增</el-button>
        </div>
        <el-table v-loading="loading" :data="queryParams.upgradeRewards" style="margin-top: 20px;">
          <el-table-column label="等级" align="center" prop="awardCondition" width="180" :show-overflow-tooltip="true"/>
          <el-table-column label="奖励" align="center" prop="awardUnit" width="180" :show-overflow-tooltip="true"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" type="text" icon="el-icon-edit" @click="formRewards = JSON.parse(JSON.stringify(scope.row));open2=true;">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.conId,'是否确认删除该奖励')">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>-->
    </el-row>

    <!--    修改充值区间-->
    <el-dialog :title="titleSection" :visible.sync="open4" width="500px" append-to-body @close="$refs['sectionForm'].clearValidate()">
      <el-form ref="sectionForm" :model="sectionObj" label-position="left">
        <el-form-item label="最小充值金额" prop="awardCondition.minPoint" :rules="[{ required: true, message: '最小充值金额不能为空', trigger: 'blur' }]">
          <el-input-number type="number" class="modal-input" :min="0" v-model="sectionObj.awardCondition.minPoint" placeholder="请输入最小充值金额"/>
        </el-form-item>
        <el-form-item label="最大充值金额" prop="awardCondition.maxPoint" :rules="[{ required: true, message: '最大充值金额不能为空', trigger: 'blur' }]">
          <el-input-number type="number" class="modal-input" :min="0" v-model="sectionObj.awardCondition.maxPoint" placeholder="请输入最大充值金额"/>
        </el-form-item>
        <el-form-item label="返现金额" prop="awardUnit" :rules="[{ required: true, message: '返现金额不能为空', trigger: 'blur' }]">
          <el-input-number type="number" class="modal-input" :min="0" v-model="sectionObj.awardUnit" placeholder="请输入返现金额	"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSection(sectionObj)">确 定</el-button>
        <el-button @click="$refs['sectionForm'].clearValidate();open4=false">取 消</el-button>
      </div>
    </el-dialog>
<!--    个人提现修改-->
    <el-dialog title="修改个人提现" :visible.sync="open" width="500px" append-to-body @close="$refs['formWithdra'].clearValidate();withdrawalsObj={}">
      <el-form ref="formWithdra" :model="withdrawalsObj" label-width="80px">
        <el-form-item label="数值" prop="awardUnit" :rules="[{required: true,message: '数值不能为空',trigger: 'blur'}]">
          <el-input v-model="withdrawalsObj.awardUnit" placeholder="请输入数值"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormEdit">确 定</el-button>
        <el-button @click="open=false;">取 消</el-button>
      </div>
    </el-dialog>
<!--      新增白名单-->
    <el-dialog title="新增白名单" :visible.sync="open1" width="500px" append-to-body @close="$refs['formIp'].clearValidate();form={}">
      <el-form ref="formIp" :model="form" label-width="80px">
        <el-form-item label="IP地址" prop="ip" :rules="[{required: true,message: 'IP地址不能为空',trigger: 'blur'}]">
          <el-input v-model="form.ip" placeholder="请输入IP地址"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitIp(form)">确 定</el-button>
        <el-button @click="open1=false;">取 消</el-button>
      </div>
    </el-dialog>
<!--    新增修改奖励-->
<!--    <el-dialog title="新增奖励" :visible.sync="open2" width="500px" append-to-body @close="$refs['formRewards'].clearValidate();formRewards={}">
      <el-form ref="formRewards" :model="formRewards" label-width="80px">
        <el-form-item label="等级" prop="awardCondition" :rules="[{required: true,message: '等级不能为空',trigger: 'blur'}]">
          <el-input v-model="formRewards.awardCondition" placeholder="请输入等级"/>
        </el-form-item>
        <el-form-item label="奖励" prop="awardUnit" :rules="[{required: true,message: '奖励不能为空',trigger: 'blur'}]">
          <el-input v-model="formRewards.awardUnit" placeholder="请输入奖励"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRewards(formRewards)">确 定</el-button>
        <el-button @click="open2=false;">取 消</el-button>
      </div>
    </el-dialog>-->
    <!--    新增修改送出奖励-->
    <el-dialog title="新增奖励" :visible.sync="open3" width="500px" append-to-body @close="$refs['formsendOut'].clearValidate();formsendOut={}">
      <el-form ref="formsendOut" :model="formsendOut" label-width="80px">
        <el-form-item label="累计奖励" prop="awardCondition" :rules="[{required: true,message: '累计奖励不能为空',trigger: 'blur'}]">
          <el-input v-model="formsendOut.awardCondition" placeholder="请输入累计奖励"/>
        </el-form-item>
        <el-form-item label="返利" prop="awardUnit" :rules="[{required: true,message: '返利不能为空',trigger: 'blur'}]">
          <el-input v-model="formsendOut.awardUnit" placeholder="请输入返利"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSendOut(formsendOut)">确 定</el-button>
        <el-button @click="open3=false;">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { del, edit, selectAll,editSingle } from "@/api/user/userConfiguration";

export default {
  data() {
    return {
      loading:false,
      queryParams:{},
      open:false,
      open1:false,
      open2:false,
      open3:false,
      open4:false,
      dataList:[],
      form:{},
      withdrawalsObj:{},
      formRewards:{},
      formsendOut:{},
      input1:false,
      input2:false,
      input3:false,
      input4:false,
      input5:false,
      input6:false,
      formClone:{},
      sectionObj:{
        awardCondition:{
          minPoint:null,
          maxPoint:null,
        },
        awardUnit:null,
      },
      titleSection:'',
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList(){
      selectAll().then(res => {
        res.data.withdrawalFee.forEach((item,index) => {
          if(index === 0) item.name = '提现手续费-USDT'
          if(index === 1) item.name = '提现手续费-银行卡'
        })
        console.log(res.data.rechargeRewards);
        res.data.rechargeRewards.forEach(item => {
          if(item.awardCondition == null) {
            console.log('item.awardCondition',item.awardCondition)
            item.awardCondition = {
              minPoint:null,
              maxPoint:null,
            }
          }else{
            item.awardCondition = JSON.parse(item.awardCondition)
          }
        })

        this.queryParams = res.data
        this.formClone = {...this.queryParams}
      })
    },
    // 通用修改接口
    editData(row){
      edit(row).then(res => {
        this.$modal.msgSuccess('修改成功')
        this.getList();
      })
    },
    submitIp(row){
      this.$refs['formIp'].validate(valid => {
        if (valid) {
          let obj = {
            awardType:7,
            awardCondition:row.ip
          }
          edit(obj).then(res => {
            this.$modal.msgSuccess('新增成功')
            this.open1 = false
            this.open = false;
            this.getList()
          })
        }
      })
    },
    /*submitRewards(row){
      this.$refs['formRewards'].validate(valid => {
        if (valid) {
          let obj = {
            awardType:8,
            awardCondition:row.awardCondition,
            awardUnit:row.awardUnit
          }
          if(row.conId) obj.conId = row.conId
          edit(obj).then(res => {
            this.$modal.msgSuccess('新增成功')
            this.open2 = false
            this.getList()
          })
        }
      })
    },*/
    submitSendOut(row){
      this.$refs['formsendOut'].validate(valid => {
        if (valid) {
          let obj = {
            awardType:9,
            awardCondition:row.awardCondition,
            awardUnit:row.awardUnit
          }
          if(row.conId) obj.conId = row.conId
          edit(obj).then(res => {
            this.$modal.msgSuccess('新增成功')
            this.open3 = false
            this.getList()
          })
        }
      })
    },
    submitSection(row){
      this.$refs['sectionForm'].validate(valid => {
        if (valid) {
          let obj = {
            awardType:3,
            awardCondition:JSON.stringify(row.awardCondition),
            awardUnit:row.awardUnit
          }
          if(row.conId) obj.conId = row.conId
          edit(obj).then(res => {
            this.$modal.msgSuccess('新增成功')
            this.open4 = false
            this.getList()
          })
        }
      })
    },
    // 个人提现修改
    submitFormEdit(){
      this.editData(this.withdrawalsObj);
      this.open = false;
    },
    cancel(){
      this.open = false
      this.$refs['form']
    },
    // 删除
    handleDelete(id,str){
      this.$modal.confirm(str).then(function() {
        return del(id)
      }).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.getList()
      })
    },
    switchChange(id){

    },
    switchChange1(row){
      this.editData(row);
    },
    switchChange3(row){
      row.awardCondition = JSON.stringify(row.awardCondition)
      console.log(row);
      this.editData(row);
    },
    switchChange2(row){
      this.editData(row);
    },
    submitForm1(row) {
      editSingle(row).then(res => {
        this.$modal.msgSuccess("修改成功");
        this.$refs['queryForm1'].resetFields()
        this.getList()
        this.input1 = false
      })
    },
    submitForm2(row) {
      editSingle(row).then(res => {
        this.$modal.msgSuccess("修改成功");
        this.$refs['queryForm1'].resetFields()
        this.getList()
        this.input2 = false
      })
    },
    submitForm3(row) {
      editSingle(row).then(res => {
        this.$modal.msgSuccess("修改成功");
        this.$refs['queryForm2'].resetFields()
        this.getList()
        this.input3 = false
      })
    },
    submitForm4(row) {
      editSingle(row).then(res => {
        this.$modal.msgSuccess("修改成功");
        this.$refs['queryForm2'].resetFields()
        this.getList()
        this.input4 = false
      })
    },
    submitForm5(row) {
      editSingle(row).then(res => {
        this.$modal.msgSuccess("修改成功");
        this.$refs['queryForm3'].resetFields()
        this.getList()
        this.input5 = false
      })
    },
    submitForm6(row) {
      editSingle(row).then(res => {
        this.$modal.msgSuccess("修改成功");
        this.$refs['queryForm3'].resetFields()
        this.getList()
        this.input6 = false
      })
    },
    changeInput1(e) {
      console.log(e)
      if (this.formClone.firstChargeWithdrawal != e && e.length > 0) {
        this.input1 = true
      } else {
        this.input1 = false
      }
    },
    changeInput2(e) {
      if (this.formClone.newUserRegistration != e && e.length > 0) {
        this.input2 = true
      } else {
        this.input2 = false
      }
    },
    changeInput3(e) {
      if (this.formClone.newUserRechargeRewards != e && e.length > 0) {
        this.input3 = true
      } else {
        this.input3 = false
      }
    },
    changeInput4(e) {
      if (this.formClone.newRegisterIP != e && e.length > 0) {
        this.input4 = true
      } else {
        this.input4 = false
      }
    },
    changeInput5(e) {
      if (this.formClone.upgradeRewards != e && e.length > 0) {
        this.input5 = true
      } else {
        this.input5 = false
      }
    },
    changeInput6(e) {
      if (this.formClone.effectiveUser != e && e.length > 0) {
        this.input6 = true
      } else {
        this.input6 = false
      }
    },
  }
}
</script>

<style scoped lang="scss">
.app-container{
  margin-left: 40px;
}
</style>
